<template>
    <!-- 简历添加 -->
    <el-config-provider :locale="zhCn">
        <div>

            <el-form :model="form" :rules="rules" ref="form1" label-width="80px">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="附件信息" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>

                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple">
                            <el-form-item label="简历编号" label-position="top">
                                <el-input placeholder="自动生成无需填写" style="width: 260px;" clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <!--  -->
                <el-col :span="24">
                    <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                        <el-form-item label="意向信息" label-position="top"
                            :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                            <div class="progress-bar">
                                <div class="progress"></div>
                            </div>
                        </el-form-item>

                    </div>
                </el-col>
                <!--  -->
                <el-row :gutter="24">
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <el-form-item label="需求编号" label-position="top">
                                <el-input v-model="form.resumeRequirements" style="width: 260px;" clearable disabled />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="意向岗位" label-position="top" prop="intendedPosition" required>
                                <el-button type="primary" style="width: 260px;"
                                    @click="JobPopUpWindow"><icon-storage />{{ form.intendedPosition || "选择意向岗位数据"
                                    }}</el-button>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="应聘类型" label-position="top"
                                prop="typeofjobapplication" required>
                                <el-select v-model="form.typeofjobapplication" placeholder="选择类型" style="width: 260px">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in ApplicationTypeData" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="意向个人信息" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                            <!--  -->
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="姓名" label-position="top"
                                prop="candidatename" required>
                                <el-input v-model="form.candidatename" placeholder="输入你的名字" style="width: 260px;"
                                    clearable />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="性别" label-position="top"
                                prop="gender" required>
                                <el-select v-model="form.gender" placeholder="选择性别" style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in GenderData" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="民族" label-position="top"
                                prop="ethnicGroup" required>
                                <el-input v-model="form.ethnicGroup" placeholder="请输入民族" style="width: 260px"
                                    clearable />

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light">
                            <el-form-item label="籍贯" label-position="top" prop="origin" required>
                                <el-cascader v-model="selectedRegion" :options="regionData" placeholder="请选择地址"
                                    style="width: 260px" clearable :teleport="true" />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="户口性质" label-position="top"
                                prop="householdRegistration" required>
                                <el-select v-model="form.householdRegistration" placeholder="选择户口" style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in HouseholdRegistrationData" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="政治面貌" label-position="top"
                                prop="politicalAppearance" required>

                                <el-select v-model="form.politicalAppearance" placeholder="选择政治面貌" style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in PoliticalStatusData" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="手机" label-position="top"
                                prop="cellPhone" required>
                                <div class="el-form-item__content">
                                    <div class="el-form-item__error" v-if="false">必填</div>
                                    <el-input v-model="form.cellPhone" placeholder="请输入手机号码" style="width: 260px"
                                        clearable />
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="邮箱" label-position="top"
                                prop="mailbox">
                                <el-input v-model="form.mailbox" placeholder="输入邮箱" clearable style="width: 260px" />

                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="出身年月" label-position="top"
                                prop="dateOfBirth" required>
                                <el-date-picker v-model="form.dateOfBirth" type="datetime" placeholder="选择日期时间"
                                    date-format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                                    style="width: 260px;">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="年龄" label-position="top"
                                prop="age" required>
                                <el-input v-model="form.age" placeholder="输入年龄" clearable style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="最高学历" label-position="top"
                                prop="degree" required>
                                <el-select v-model="form.degree" placeholder="请选择最高学历" style="width: 260px"
                                    placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in EducationData" :key="item.PositionLabelValue"
                                        :label="item.label" :value="item.value" />
                                </el-select>

                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="学校" label-position="top"
                                prop="school" required>
                                <el-input v-model="form.school" placeholder="请输入毕业学校" clearable style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="专业" label-position="top"
                                prop="specialized" required>
                                <el-input v-model="form.specialized" placeholder="请输入专业名称" clearable
                                    style="width: 260px" />
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="毕业时间" label-position="top"
                                prop="graduationTime" required>
                                <el-date-picker v-model="form.graduationTime" type="datetime" placeholder="选择日期时间"
                                    date-format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                                    style="width: 260px;">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="婚育情况" label-position="top"
                                prop="marriageAndChildbearing" required>
                                <el-select v-model="form.marriageAndChildbearing" placeholder="请选择婚育情况"
                                    style="width: 260px" placement="bottom">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in MarriageAndChildbearingData" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="工作及实习经历" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="工作经历" label-position="top"
                                prop="lastWork">
                                <el-input v-model="form.lastWork" placeholder="请输入工作及实习经历" clearable
                                    style="width: 660px" type="textarea" :autosize="{ minRows: 5, maxRows: 8 }" />

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--  -->
                    <!--  -->
                </el-row>
                <hr>
                <el-form-item style="margin-top: 6px;">
                    <el-button type="primary" @click="Append">立即创建</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
        <!--  -->
        <el-dialog title="选择意向岗位" v-model="IntentionDisplay" width="60%" destroy-on-close>

            <el-table :data="IntentionData" border>
                <!-- 单选列 -->
                <el-table-column label="选择" width="60" fixed="left">
                    <template #default="scope">
                        <el-radio v-model="selectedRowId" :label="scope.row.requirementid">
                            <span class="radio-custom"></span>
                        </el-radio>
                    </template>
                </el-table-column>
                <!-- 固定岗位名称列 -->
                <el-table-column prop="requirementid" label="需求编号" width="120" fixed="left" />
                <el-table-column prop="jobname" label="岗位名称" width="120" fixed="left"
                    style="color: rgb(102, 177, 255);">
                    <template #default="scope">
                        <span style="color: rgb(102, 177, 255);">
                            {{ scope.row.jobname }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label"
                    :width="col.width">
                </el-table-column>
            </el-table>


            <span>
                <el-button @click="IntentionToCancel">取消</el-button>
                <el-button type="primary" @click="IntentionConfirmed">确认</el-button>
            </span>
        </el-dialog>
    </el-config-provider>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import request from '@/api/request'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { regionData, codeToText } from 'element-china-area-data'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
// 地址数据
const selectedRegion = ref([])

const JobData = ref("选择意向岗位数据");//岗位数据
const xq = ref("")
const IntentionDisplay = ref(false)
// 意向岗位弹窗
const JobPopUpWindow = () => {
    IntentionDisplay.value = true
}

const selectedRowId = ref(null) // 保存当前选中行

const textArray = computed(() => {
    return selectedRegion.value.map(code => {
        // 查找对应的文字，如果找不到则显示"未知地区"
        return codeToText[code] || '未知地区';
    });
});

// 拼接成完整地址
const fullAddress = computed(() => {
    return textArray.value.join('-');
});

watch(() => selectedRegion.value, (newValue) => {
    if (newValue) {
        console.log(fullAddress.value)
        form.value.origin = fullAddress.value;
    } else {
        form.value.origin = '';
    }
})

const IntentionData = ref([])// 意向岗位数据

const columns = [
    { id: 'departmentid', label: '部门名称', width: '120' },
    { id: 'jobnature', label: '岗位性质', width: '120' },
    { id: 'worklocation', label: '工作地点', width: '120' },
    { id: 'budgetsalary', label: '薪资区间', width: '120' },
    { id: 'sourceofpersonnel', label: '人员来源', width: '120' },
    { id: 'educationlevel', label: '学历要求', width: '120' },
    { id: 'yearsofexperiencemin', label: '工作年限', width: '120' },
    { id: 'jobdescription', label: '岗位职责', width: '220' },
    { id: 'qualifications', label: '任职要求', width: '220' },
]

const DemandData = () => {
    request({
        url: '/recruitmentBasics/findByStatus1',
        method: 'get',
    }).then(res => {
        IntentionData.value = res.data
        console.log(res.data);

    }
    )
}
DemandData();
// 意向取消
const IntentionToCancel = () => {
    IntentionDisplay.value = false
}
const ApplicationType = ref('')//应聘类型
const ApplicationTypeData = ref([{//应聘类型数据
    value: '正式',
    label: '正式'
}, {
    value: '临时工',
    label: '临时工'
}, {
    value: '其他',
    label: '其他'
}])
// 意向确定
const IntentionConfirmed = () => {
    const selectedRow = IntentionData.value.find(row => row.requirementid === selectedRowId.value)
    console.log('选中的数据:', selectedRow)
    form.value.intendedPosition = selectedRow.jobname
    form.value.resumeRequirements = selectedRow.requirementid
    form.value.screenpeople = selectedRow.demandsubmitter
    form.value.typeofjobapplication = selectedRow.jobnature
    IntentionDisplay.value = false
}

const selectedGender = ref('');//性别
//  性别数据
const GenderData = ref([{
    value: '0',
    label: '男'
}, {
    value: '1',
    label: '女'
}]);

const selectedHouseholdRegistration = ref('');//户籍
// 户籍数据
const HouseholdRegistrationData = ref([{
    value: '城镇',
    label: '城镇'
}, {
    value: '农村',
    label: '农村'
}]);
const selectedPoliticalStatus = ref('');//政治面貌
// 政治面貌数据
const PoliticalStatusData = ref([{
    value: '群众',
    label: '群众'
}, {
    value: '党员',
    label: '党员'
}]);
const selectedEducation = ref('');//学历
// 学历数据
const EducationData = ref([{
    value: '0',
    label: '高中'
}, {
    value: '1',
    label: '本科'
}, {
    value: '2',
    label: '大专'
}, {
    value: '3',
    label: '研究生'
}]);
const selectedMarriageAndChildbearing = ref('');//婚姻与生育
// 婚育数据
const MarriageAndChildbearingData = ref([{
    value: '未婚',
    label: '未婚'
}, {
    value: '已婚',
    label: '已婚'
}, {
    value: '离异',
    label: '离异'
}, {
    value: '丧偶',
    label: '丧偶'
}]);

// 出生日期
const DateOfBirth = ref('');
// 毕业时间
const GraduationTime = ref('');

// 表单引用
const form1 = ref(null)
const router = useRouter()

// 表单数据
const form = ref({
    candidateid: null,             // 候选人编号
    candidatename: '',             // 候选人姓名
    gender: null,                  // 性别（0：男，1：女）
    dateOfBirth: '',               // 出生日期
    age: null,                     // 年龄
    ethnicGroup: '',               // 民族
    politicalAppearance: '群众',       // 政治面貌
    origin: '',                    // 籍贯
    householdRegistration: '',     // 户口（城镇，农村）
    cellPhone: '',                 // 手机
    degree: null,                  // 学历（如高中）
    specialized: '',               // 专业
    graduationTime: '',            // 毕业时间
    school: '',                    // 学校
    intendedPosition: '',          // 意向岗位
    marriageAndChildbearing: '未婚',   // 婚育情况
    mailbox: '',                   // 邮箱
    resumeStatus: '待面试',              // 简历状态（待面试，待入职，已入职）
    appraise: '',                  // 评价
    screenpeople: '',              // 筛选人
    filterDate: '',                // 筛选日期
    lastWork: '',                  // 上次工作
    resumeRequirements: '',        // 简历需求
    typeofjobapplication: ''         // 应聘类型（社招，校招，实习，其他）'
})

// 表单验证规则
const rules = ref({
    candidatename: [
        { required: true, message: '请输入候选人姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    gender: [
        { required: true, message: '请选择性别', trigger: 'change' }
    ],
    dateOfBirth: [
        { required: true, message: '请选择出生日期', trigger: 'change' }
    ],
    age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { pattern: /^([1-9]|[1-9][0-9]|1[0-5][0-9])$/, message: '请输入有效的年龄(1-150)', trigger: 'blur' }
    ],
    ethnicGroup: [
        { required: true, message: '请输入民族', trigger: 'blur' }
    ],
    politicalAppearance: [
        { required: true, message: '请选择政治面貌', trigger: 'change' }
    ],
    origin: [
        { required: true, message: '请选择籍贯', trigger: 'change' }
    ],
    householdRegistration: [
        { required: true, message: '请选择户口性质', trigger: 'change' }
    ],
    cellPhone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
       
    ],
    mailbox: [
        { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
    ],
    degree: [
        { required: true, message: '请选择最高学历', trigger: 'change' }
    ],
    specialized: [
        { required: true, message: '请输入专业名称', trigger: 'blur' }
    ],
    graduationTime: [
        { required: true, message: '请选择毕业时间', trigger: 'change' }
    ],
    school: [
        { required: true, message: '请输入毕业学校', trigger: 'blur' }
    ],
    intendedPosition: [
        { required: true, message: '请选择意向岗位', trigger: 'change' }
    ],
    marriageAndChildbearing: [
        { required: true, message: '请选择婚育情况', trigger: 'change' }
    ],
    typeofjobapplication: [
        { required: true, message: '请选择应聘类型', trigger: 'change' }
    ],
    lastWork: [
        { required: true, message: '请输入工作及实习经历', trigger: 'blur' }
    ]
})

// 重置表单
const resetForm = () => {
    form1.value.resetFields()
}

// 提交表单
const Append = () => {
    form1.value.validate((valid) => {
        if (valid) {
            // 处理籍贯数据，将数组转换为字符串
            const formData = {
                ...form.value,
                origin: Array.isArray(form.value.origin) ? form.value.origin.join('/') : form.value.origin
            };

            request({
                url: '/candidateresume/insert',
                method: 'post',
                data: formData
            }).then(res => {
                console.log(res.data)
                ElMessage.success('添加成功！')
                request({
                    url: '/dataoperationrecordsheet/insert',
                    method: 'get',
                    params: {
                        dataoperationrecordsheet: form.value.candidatename
                    }
                }).then(res => {
                    console.log(res.data)
                    xq.value = res.data.candidateid

                })
                // 添加成功后关闭当前页面，返回上一页
                router.go(-1)
            }).catch(error => {
                ElMessage.error('添加数据失败！')
            })
        } else {
            ElMessage.warning('请填写必填项')
            return false
        }
    })
}

</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}



/* 单选框选中样式 */
.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}
</style>